<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{name}}</p>
        <button :class="test" :xx="test">111</button>
        <input type="text" :value="name">
    </div>
    <script>
        const VM = new Vue({
            //data第二种写法(函数的写法)
            //data functions should return an object:如果data配置项写法如果是函数,必须要返回一个对象
            //data函数返回结果作为VM属性与属性值
            data() {
                return {
                    name: "今天是一个好日子,吃了火锅",
                    age: 18,
                    sex: '爷们',
                    hobby: '游戏',
                    test:'aaaa'
                }
            }

        });
        //下面这行代码：也可以将VM与容器进行关联
        //$mount原型上的一个方法,Vue类的实例可以调用,作用是与el配置项功能一样的
        //就是把VM实例与容器进行关联
        VM.$mount('#app');
        console.log(VM);
    </script>
</body>

</html>